<template>
  <div>
    <span class="el-menu__title">查询用户信息</span>
    <el-form style="margin-top: 1%;margin-left: 1%;margin-bottom: 1%">
      <el-row :gutter="10">
        <el-col :span="2" style="text-align: right">
          <span>用户ID:</span>
        </el-col>
        <el-col :span="4">
          <el-input size="mini" placeholder="" v-model="findUser.id" clearable></el-input>
        </el-col>
        <el-col :span="2" style="text-align: right">
          <span>用户名:</span>
        </el-col>
        <el-col :span="4">
          <el-input size="mini" placeholder="" v-model="findUser.username" clearable></el-input>
        </el-col>
        <el-col :span="4">
          <span style="color: red ; font-size: small">(*查询条件用户名优先级高于id))</span>
        </el-col>
        <el-col :span="4" style="text-align: right">
          <el-button type="primary" size="mini" @click="query()">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row>

    </el-row>

    <span>查询结果</span>
    <span style="color: red ; font-size: small">(*查询结果会依次展示))</span>
    <el-row>
      <el-table :data="User" height="600"
                border stripe
                highlight-current-row
                style="width: 100%"
                size="mini">
        <el-table-column prop="id" label="编号" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
        <el-table-column prop="username" label="用户名" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
        <el-table-column prop="realname" label="真实姓名" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
        <el-table-column prop="sex" label="性别" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
        <el-table-column prop="address" label="住址" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
        <el-table-column prop="telephone" label="联系方式" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
        <el-table-column prop="email" label="邮件" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
        <el-table-column prop="country" label="国家" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
      </el-table>
    </el-row>


  </div>
</template>

<script>
    import {postRequest} from "../../utils/api";

    export default {
        name: "FindUser",
        data() {
            return {
                findUser: {
                    id: '', // ID
                    username: '', // 用户名
                },
                User: [],

            }
        },
        methods: {

            query() {
                postRequest('/user/findOne',
                    {
                        'id': this.findUser.id === '' ? '0' : this.findUser.id,
                        'username': this.findUser.username
                    }
                ).then(res => {
                    // 登录密码校验成功
                    if (res && res.flag === '1') {
                        // 保存登录信息
                        this.User.unshift(res.user)
                        this.$message.success(res.msg + '!');
                        // replace 不可回退  铺设可以
                    } else {
                        // 登录失败
                        this.$message.error(res.msg + '!');
                    }
                })

            },

        }
    }
</script>

<style scoped>

</style>
